<template>
  <div class="User">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 查询新增操作 -->
    <Search @search="search" :type="type"></Search>
    <!-- 表体部分 -->
    <div class="contain">
      <el-table
        :data="userList"
        border
        style="width: 100">
        <el-table-column
          type="index"
          label="下标"
          width="180">
        </el-table-column>
        <el-table-column
          prop="username"
          label="账号"
          width="219">
        </el-table-column>
        <el-table-column
          prop="password"
          label="密码"
          width="200">
        </el-table-column>
        <el-table-column
          prop="idCard"
          label="证件号"
          width="250">
        </el-table-column>
        <el-table-column
          prop="cardType"
          label="证件类型"
          width="200">
        </el-table-column>
        <el-table-column
          prop='name'
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="userLicense"
          label="驾驶证编号"
          width="200">
        </el-table-column>
        <el-table-column
          label="操作"
          width="250">
          <template slot-scope="scoped">
            <el-button type="primary" size="small" @click="userChange(scoped.row)">修改</el-button>
            <el-button type="danger" size="small" @click="userDelete(scoped.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagenation">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="params.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <!-- 修改用户弹框 -->
    <el-dialog
      title="修改用户信息"
      :visible.sync="dialogEdit"
      width="45%">
      <el-form :model="user" label-width="130px" ref="formEdit">
        <el-form-item label="账号：">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model="user.password" disabled></el-input>
        </el-form-item>
          <el-form-item label="姓名：">
            <el-input v-model="user.name"></el-input>
          </el-form-item>
          <el-form-item label="证件号：">
            <el-input v-model="user.idCard" disabled></el-input>
          </el-form-item>
          <el-form-item label="证件类型：">
            <el-input v-model="user.cardType"></el-input>
          </el-form-item>
          <el-form-item label="驾驶证编号：">
            <el-input v-model="user.userLicense"></el-input>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogEditMethod">取 消</el-button>
        <el-button type="primary" @click="dialogEditSure">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除用户弹框 -->
    <el-dialog
      title="删除用户"
      :visible.sync="dialogDelete"
      width="30%">
      <span>你确定要删除该用户吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDelete = false">取 消</el-button>
        <el-button type="primary" @click="dialogDeleteMethod">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import Search from '../search'
// import Pagenation from '../pagenation'
export default {
  name: 'User',
  components: {
    Search
    // Pagenation
  },
  data () {
    return {
      userList: [],
      params: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      total: 0,
      dialogEdit: false,
      dialogDelete: false,
      user: {},
      type: 1
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const { data: res } = await request.postJson('/userList', {
        pageSize: this.pagesize,
        pageNum: this.pagenum
      })
      // console.log(res)
      this.userList = res.rows
      this.total = res.total
    },
    // 监听pagesize改变事件
    handleSizeChange (newsize) {
      this.pagesize = newsize
      this.getData()
    },
    // 监听页码值改变的事件
    handleCurrentChange (newpage) {
      console.log(newpage)
      this.pagenum = newpage
      this.getData()
    },
    // 修改用户信息
    userChange (row) {
      this.user = row
      console.log(this.user)
      this.dialogEdit = true
    },
    dialogEditMethod () {
      this.dialogEdit = false
    },
    async dialogEditSure () {
      console.log(this.user)
      // 发送修改请求
      const { data: res } = await request.postJson('/updateUser', this.user)
      console.log(res)
      this.dialogEdit = false
    },
    async dialogDeleteMethod () {
      console.log(this.user.id, this.user.userId)
      const { data: res } = await request.postJson('/deleteUser', {
        id: this.user.id,
        userId: this.user.userId
      })
      console.log(res)
      this.getData()
      // 发送删除用户请求
      this.dialogDelete = false
    },
    userDelete (row) {
      this.user = row
      this.dialogDelete = true
      console.log(row)
    },
    async search (data) {
      // 发送查询请求
      const { data: res } = await request.postJson('/userList', {
        name: data
      })
      this.userList = res.rows
    }
  }
}
</script>

<style lang="scss" scoped>
.contain{
  margin-top: 10px;
}
/deep/.putOut{
  display: none !important;
}
</style>
